import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import './index.less'
import searchImg from '../../img/searchimg.png'
import downArrow from '../../img/downArrow.png'
import blueDownArrow from '../../img/blueDownArrow.png'

export default class listDetails extends Component {

  config = {
    navigationBarTitleText: '酒店KTV'
  }

  state={
    near:'附近',
    smart:'智能排序',
    originalIcon:downArrow,
    // newIcon:blueDownArrow,
  }
  handleClick(){
    Taro.navigateTo({
      url:'../template/index'
    })
  }

  // componentWillMount () { }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const data = {
      title:'酒店KTV',
      lists:[
        {
          id:1,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'智享酒店',
          title:'单人房间',
          price:28,
          address:'商之都 12km'
        },{
          id:2,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'智享酒店',
          title:'单人房间',
          price:28,
          address:'商之都 12km'
        }
      ]
    }
    return (
      <View>
        {/**--------顶部搜索框--------- */}
        <View className='rightSearchBox'>
            <Image src={searchImg} className='searchImg' />
            <Input 
              type='text'
              placeholder='请输入商家名、品类或者商圈'
              className='input' 
            />
        </View>
        {/*---------筛选
        <View className='screening-box'>
          <Text className='vertica-line-text'>{data.title}</Text>
          <View className='verticalLine' />
          <View>
            <Text className='vertica-line-text'>{this.state.near}</Text>
            <Image src={this.state.originalIcon} className='downBack' />
          </View>
          <View className='verticalLine' />
          <View>
            <Text className='vertica-line-text'>{this.state.smart}</Text>
            <Image src={this.state.originalIcon} className='downBack' />
          </View>
        </View>  ------- */}
        {/*-------具体列表-------- */}
        <View>
          {data.lists.map(item=>(
            <View key={item.id} className='list-box' onClick={this.handleClick}>
              <View className='list-box-first'>
                <Image src={item.img} className='listImg' />
                <View className='list-box-first-bottom'>
                  <Text className='bottom-name'>{item.name}</Text>
                  <View>
                    <Text className='bottom-title'>{item.title}</Text>
                    <Text className='bottom-price'>￥{item.price}元</Text>
                  </View>
                </View> 
              </View>
              <Text className='list-box-address'>{item.address}</Text>
            </View>  
          ))}  
        </View>

      </View>
    )
  }
}

